const path = require('path')
const htmlwebpackPlugin = require('html-webpack-plugin')
/*
依赖
npm install webpack-dev-server -D
运行 npx webpack-dev-server
*/
module.exports = {  
    entry: './index',
    output: {
        filename: "js/[name].js",
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ],
    },
    plugins: [
        new htmlwebpackPlugin(
            {
                template:'./index.html'
            }
        )
    ],
    devServer: {
        static: path.resolve(__dirname, 'dist'),//运行代码目录  webpack4使用contentBase webpack5使用static
        compress: true,//启动gzip压缩
        port: 9000,//端口号
        open: true,//自动打开浏览器
        // watchContentBase: true,//监视static 一旦文件变化重新reload
        // watchOptions: {
        //     //忽略文件，不要监视
        //     ignored: /node_modules/
        // },
        // clientLogLevael: 'none',//不要显示启动服务器日志信息
        // quiet: true,//除了一些基本启动信息外，其他内容都不要显示
        // overlay: false,//出现错误不要全屏提示
        // proxy: {//开发环境跨域问题
        //     '/api': {
        //         //http://localhost:9000/api/users=>https://api/github.com/api/users
        //         target: 'https://api.github.com',  //目标接口域名
        //         changeOrigin: true,  //是否跨域
        //         //http://localhost:9000/api/users=>https://api/github.com/users
        //         pathRewrite: {
        //             '^/api': ''
        //         }
        //     }
        // },
        hot: true,//开启HMR功能 webpack4
        // liveReload: true,
    },
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",//webpack5 代替hot方法
    mode: 'development'
}